﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>分类</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="static/layui-v2.5.4/layui/css/layui.css" media="all">
  <script src="static/layui-v2.5.4/layui/layui.js" charset="utf-8"></script>

  <style>
    body {
      font-family: "Lato", sans-serif;
    }

    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }

    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    .sidenav a:hover,
    .offcanvas a:focus {
      color: #f1f1f1;
    }

    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }

    @media screen and (max-height: 450px) {
      .sidenav {
        padding-top: 15px;
      }

      .sidenav a {
        font-size: 18px;
      }
    }

    #div_wait {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 99;
      /* transform: translate(-50%, -50%); */
      display: none;
    }
  </style>
  <script type="text/javascript">
    function openNav() {//打开侧边栏函数
      document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {//关闭侧边栏函数
      document.getElementById("mySidenav").style.width = "0";
    }

    var img_url = ''
    function fileSelect() {
      document.getElementById("fileToUpload").click();
    }

    function fileSelected() {
      // 文件选择后触发次函数
    }
    $(document).ready(function () {//设置标题字数超过50个字弹窗提醒
      $("#inputId").keyup(function () {
        if ($.trim(this.value).length > 50) {
          alert("输入字符大于50个,请重新输入!");
        }
      });
    });
    $(document).ready(function () {
      $('[data-toggle="tooltip"]').tooltip();
    });

    layui.use('upload', function () {
      var $ = layui.jquery
        , upload = layui.upload;
      //普通图片上传
      var uploadInst = upload.render({
        elem: '#test1',
        url: '/upload.do',
        acceptMime: "image/*", // 选取的时候只上传文件类型
        accept: "images", // 允许上传的类型
        field: "image",
        before: function (obj) {
          //预读本地文件示例，不支持ie8
          obj.preview(function (index, file, result) {
            $('#demo1').attr('src', result); //图片链接（base64）
          });
        }
        , done: function (res) {
          //如果上传失败
          if (res.code > 0) {
            return layer.msg('上传失败');
          }
          //上传成功
          else {
            img_url = res["0"].data.src; // 修改全局的img_url
          }
        }
        , error: function () {
          //演示失败状态，并实现重传
          var demoText = $('#demoText');
          demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
          demoText.find('.demo-reload').on('click', function () {
            uploadInst.upload();
          });
        }
      });
    });

    // 进行识别
    function realize() {
      var algorithm = '';
      var choose = document.getElementsByName('algorithms');
      for (var i = 0; i < choose.length; i++)
        if (choose[i].checked) {
          algorithm = choose[i].value;
          break;
        }

      if (img_url == '')
        alert('请先选择一张图片！');
      else {
        $.ajax({
          type: "GET",
          async: false,
          beforeSend: function () {
            layer.msg('请稍等！')
          },
          url: '/classify.do',
          data: {
            'img_url': img_url,
            'choose': algorithm
          },
          success: function (res) {
            if (res == 'qipao')
              res = '旗袍';
            else res = '不是旗袍';
            res = algorithm + ' : ' + res;
            layer.open({
              title: '分类结果',
              content: res
            });
          }
        });
      }
    }

    function showfeat() {
      var flag = true;
      var show = document.getElementById("div_wait");
      if (img_url == '')
        alert('请先选择一张图片！');
      else {
        $.ajax({
          type: "POST",
          url: "/showfeat.do",
          data: {
            'img_path': img_url
          },
          beforeSend: function () {
            show.style.display = "block";
          },
          success: function (res) {
            if (res == "ok") {
              show.style.display = "none";
            }
          }
        });
      }
    }
  </script>
</head>

<body style="background-image: url(static/common/image/bg2.jpg);background-size: 100%">
  <!--导航栏-->
  <nav class="navbar navbar-expand-sm  navbar-dark " style="height:10%;background-color: #2C3D59">
    <span class="text-white ml-4" style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 菜单栏</span>
    <h2 class=" font-weight-bold ml-5" style="color:#FFFFFF;padding-left:360px">旗袍识别系统</h2>
    <div style="padding-left: 400px">
      <div class="dropdown">
        <!--下拉菜单-->
        <a class="text-white dropdown-toggle" data-toggle="dropdown">
          <img
            style="height: 24px;width: 24px;-webkit-border-radius:12px;-moz-border-radius:12px;background-color:#FFFFFF"
            src="static/common/image/user.png">&nbsp;
          {% if username == none %}
          未登录
          {% else %}
          <span>{{username}}</span>
          {% endif %}
        </a>
        <div class="dropdown-menu small">
          {% if username == none %}
            <a class="dropdown-item" href="/loginPage">
              <img style="height: 20px;width: 20px;border-left:1px #00FF66" src="static/common/image/poweroff.png">去登录
            </a>
          {% else %}
            <a class="dropdown-item" href="/logout.do">
              <img style="height: 20px;width: 20px;border-left:1px #00FF66" src="static/common/image/poweroff.png">退出
           </a>
          {% endif %}
        </div>
      </div>
    </div>
  </nav>

  <!--左侧目录-->
  <div class="container-fluid">
    <div class="row">
      <!--侧边栏-->
      <div id="mySidenav" class="sidenav">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <a class="nav-link ml-5 mt-4" href="/crawlerPage">爬虫</a>
        <a class="nav-link ml-5 mt-4" href="/labelPage">标注</a>
        <a class="nav-link ml-5 mt-4" href="/classifyPage">分类</a>
        <a class="nav-link ml-5 mt-4" href="/algorithmPage">算法</a>
      </div>

      <div class="col-sm-10">
        <div style="height: 100%;width: 80%;margin-left:30%;">
          <!-- 这里是主模板 -->
          <div class="layui-upload">
            <button type="button" id="test1" class="layui-btn mt-3" data-toggle="collapse" data-target="#bg-img"
              data-toggle="tooltip" data-placement="bottom" title="添加题图">上传图片</button>
            <div class="layui-upload-list">
              <img class="layui-upload-img" id="demo1"
                style="height: 400px;width:600px;background-color: #F6F6F6;border:0px">
              <div id="div_wait"><img style="width: 100px;height:100px;"
                  src="static/common/image/wait.gif" /></div>
            </div>
            <div class="mt-4">
              <!--用layui实现的单选框按钮-->
              <input type="radio" name="algorithms" value="KNN" title="KNN" checked>
              <span style="font-size: 20px;">KNN</span>
              <input class="ml-4" type="radio" name="algorithms" value="SVM" title="SVM算法">
              <span style="font-size: 20px;">SVM</span>
              <input class="ml-4" type="radio" name="algorithms" value="RF" title="决策树算法">
              <span style="font-size: 20px;">RandomForest</span>
              <button type="button" class="layui-btn" onclick="realize()" style="margin-left:30px;width:10%">识别</button>
              <button type="button" class="layui-btn" onclick="showfeat()"
                style="margin-left:20px;width:10%">特征图</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>